<template>
	<view>
		<view>
			<view <view class="identityClass">
				<view class="identityClass_title">即将进行人脸识别</view>
				<view class="identityClass_details">请衣着整齐，平视屏幕，请保持光线充足</view>
			</view>

			<view class="Face_frame">
				<img v-if="imgyn" style="" src='../../../../static/shen/Slice 74@2x.png' />
				<img v-else style="" src='../../../../static/shen/Slice 75@2x.png' />
			</view>

			<!-- 协议 -->
			<!--  @click="protocolFn('bottom')" -->
			<view class="protocol">
				<view class="protocol_icon">
					<img v-if="isSelect" src="../../../../static/Select.png" @click="protocolImg()" />
					<img v-else src="../../../../static/NoSelect.png" @click="protocolImg()" />
				</view>
				<view class="protocol_text">我已阅读并同意<text class="hetong" @click="protocolFn('bottom')">《借款合同及相关协议》</text>
				</view>
			</view>
			<view class="prompt">请确保是**本人操作</view>
			<view v-if="Portrait" class="btn">开始识别</view>
			<view v-else class="btn color" @click="recognizing('center')">开始识别</view>

			<!--  -->
			<view class="details">
				<view class="details_image"><img src="../../../../static/shen/Slice 71@2x.png" /></view>
				<view>信息智能加密，实时保障您的信息安全</view>
			</view>


			<!-- 识别机会 -->
			<uni-popup ref="opportunities" background-color="#fff" class="opportunities">
				<view class="popup-content">
					<view class="opportunities_img">
						<img src="../../../../static/shen/Slice 78@2x.png" />
					</view>
					<view class="opportunities_text">为保障您的账号及资金安全。我们需要通过第三方服务获取您的面部信息，用于核验本人操作</view>

					<view class="opportunities_details"><text>{{num}}</text>秒后开始验证</view>

					<view class="details">
						<view class="details_image"><img src="../../../../static/shen/Slice 71@2x.png" /></view>
						<view>信息智能加密，实时保障您的信息安全</view>
					</view>
				</view>
			</uni-popup>



			<!-- 协议 -->
			<uni-popup ref="protocol" background-color="#fff" class="protocol">
				<view class="popup-content">
					<view class="protocol_text">为了给您提供更好的个人贷款等服务，请阅读如下协议并授权平台向中国人民银行金融信息基础数据库查询、报送您的个人信息和信贷信息。</view>

					<view class="protocol_details">《百信银行征信授权查询书》</view>
					<view class="protocol_details">《个人信息查询及使用授权书》</view>
					<view class="protocol_details">《个人授信借款合同》</view>

					<view class="bnt" @click="cancel()">取消</view>
				</view>
			</uni-popup>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avicnt: 1,
				Portrait: false,
				NationalEmblem: 0,
				value: '',
				isSelect: true,
				num: 3,
				imgyn:false,
			}
		},
		methods: {
			recognizing(type) {
				this.$refs.opportunities.open(type)

				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/message/identity/identity?param1=1'
					});
				}, 3000);

				const timer = setInterval(() => {
					if (this.num > 0) {
						this.num--;
					} else {
						clearInterval(timer);
					}
				}, 1000);
			},
			opportunitiesFn() {
				this.$refs.opportunities.close()
			},
			protocolFn(type) {
				this.$refs.protocol.open(type)
			},
			cancel() {
				this.$refs.protocol.close()
			},
			protocolImg() {
				this.isSelect = !this.isSelect
				this.Portrait = !this.Portrait


			}

		}
	}
</script>

<style lang="scss" scoped>
	.identityClass {
		padding: 0 40rpx;

		.identityClass_title {
			width: 360rpx;
			height: 56rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 40rpx;
			color: #333333;
			line-height: 47rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-bottom: 12rpx;
		}

		.identityClass_details {
			width: 518rpx;
			height: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
			line-height: 33rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-bottom: 40rpx;
		}
	}

	.Face_frame {
		width: 392rpx;
		height: 392rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 32rpx 0rpx rgba(0, 99, 254, 0.1);
		border-radius: 200rpx;
		margin: 0 auto;
		margin-top: 44rpx;
		margin-bottom: 92rpx;
		img{
			width: 100%;
		}
	}

	.protocol {
		margin-left: 40rpx;
		display: flex;
		justify-items: center;
		align-items: center;
		margin-top: 104rpx;
		margin-bottom: 138rpx;

		.protocol_text {
			/* margin-left: -800rpx; */
		}

		.protocol_icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 12rpx;

			img {
				width: 100%;
			}
		}

		.hetong {
			color: #2253FF;
		}
	}

	.prompt {
		// width: 272rpx;
		height: 42rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #666666;
		line-height: 35rpx;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.btn {
		width: 670rpx;
		height: 100rpx;
		background: rgba(34, 83, 255, 0.3);
		border-radius: 52rpx 52rpx 52rpx 52rpx;
		margin: 0 auto;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 100rpx;
		margin-bottom: 20rpx;
	}

	.details {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		margin: 0 auto;
		// padding-bottom: 445rpx;

		.details_image {
			width: 27rpx;
			height: 34rpx;
			margin-right: 10rpx;

			img {
				width: 100%;
			}
		}
	}

	.color {
		background-color: #2253FF;
	}

	.opportunities {
		border-radius: 50rpx;
		width: 750rpx;

		.popup-content {
			border-radius: 50rpx;
			width: 630rpx;
			height: 744rpx;
			background: linear-gradient(180deg, #EBF3FF 0%, #FFFFFF 39%);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			padding-top: 76rpx;

			.opportunities_img {
				width: 356rpx;
				height: 312rpx;
				// background: #EAF4FD;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				margin: 0 auto;
				// margin-bottom: 20rpx;
				img{
					width: 100%;
				}
			}

			.opportunities_text {
				width: 510rpx;
				height: 132rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				line-height: 38rpx;
				text-align: center;
				margin: 0 auto;
				margin-bottom: 36rpx;
			}

			.opportunities_details {
				width: 160rpx;
				height: 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				line-height: 28rpx;
				text-align: center;
				margin: 0 auto;
				margin-bottom: 122rpx;

				text {
					color: #2253FF;
				}
			}
		}

	}

	.popup-content {
		.protocol_text {
			width: 670rpx;
			height: 126rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #999999;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-top: 40rpx;
			margin-left: 40rpx;
		}

		.protocol_details {
			margin-top: 20rpx;
			margin-bottom: 28rpx;
			margin-left: 38rpx;
		}

		.bnt {
			margin: 0 auto;
			margin-top: 70rpx;
			width: 672rpx;
			height: 90rpx;
			border: 2rpx solid #ccc;
			border-radius: 50rpx;
			text-align: center;
			line-height: 90rpx;
			margin-bottom: 20rpx;
		}
	}
</style>

<style>
	.opportunities {
		/* border-radius: 50rpx; */
		width: 1050rpx;

		uni-view {
			border-radius: 50rpx;
		}
	}
</style>